<template>
    <div>
        <div class="card">
            <div v-if="formType == 'phone'" class="phone">
                <h2 style="text-align: center;color:#3499DF;padding: 30px">手机号登录</h2>
                    <van-form @submit="onPhoneSubmit">
                        <van-field
                                v-model="phoneForm.phone"
                                name="phone"
                                label="手机号码"
                                placeholder="手机号码"
                                :rules="[{ pattern:phoneRule, message: '请输入正确手机号码' }]"
                        />
                        <van-field
                                v-model="phoneForm.code"
                                name="code"
                                center
                                clearable
                                label="短信验证码"
                                placeholder="请输入短信验证码"
                        >
                            <template #button>
                                <tencent-captcha :phone="phoneForm.phone" :phoneRule="phoneRule"
                                                 scene="2"></tencent-captcha>
                            </template>
                        </van-field>
                        <div class="isUserLogin">
                            <span @click="formType = 'user'">用户名登录</span>
                        </div>
                        <div style="margin: 16px;">
                            <van-button round block type="info" native-type="submit">提交</van-button>
                        </div>
                    </van-form>
                <van-button round block style="width: 90%;margin: 20px auto;" @click="$router.push('/user/register')">注册</van-button>
            </div>
            <div v-if="formType == 'user'" class="user">
                <h2 style="text-align: center;color:#3499DF;padding: 30px">用户名登录</h2>
                    <van-form @submit="onUserSubmit">
                        <van-field
                                v-model="userForm.username"
                                name="username"
                                label="用户名"
                                placeholder="用户名"
                                :rules="[{ required: true, message: '请填写用户名' }]"
                        />
                        <van-field
                                v-model="userForm.password"
                                name="password"
                                label="密码"
                                placeholder="密码"
                                :rules="[{ required: true, message: '请填写密码' }]"
                        />
                        <div class="isUserLogin">
                            <span @click="formType = 'phone'">手机号码登录</span>
                        </div>
                        <div style="margin: 16px;">
                            <van-button round block type="info" native-type="submit">提交</van-button>
                        </div>
                    </van-form>
                <van-button round block style="width: 90%;margin: 20px auto;" @click="$router.push('/user/register')">注册</van-button>
            </div>
        </div>
    </div>
</template>

<script>
    import {phone_login, user_login} from "../../../request/api";
    import TencentCaptcha from "../../../components/TencentCaptcha/TencentCaptcha";
    import {userType} from "../../../utils/base";

    export default {
        name: "index",
        data() {
            return {
                formType: 'phone',
                phoneRule: /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/,
                phoneForm: {
                    phone: '',
                    code: ''
                },
                userForm: {
                    username: '',
                    password: ''
                }
            }
        },
        methods: {
            onPhoneSubmit(values) {
                console.log('submit', values);
                phone_login(values).then(res => {
                    this.$cookies.set("token", res.token);
                    this.$store.commit('setToken', res.token)
                    console.log('状态管理token', this.$store.state.token)
                    let {user_type} = userType(res.token);
                    this.$store.commit('setUserType', user_type);
                    let {user_name} = userType(res.token);
                    this.$store.commit('setUserName', user_name)
                    console.log('user_type', user_type, user_name)
                    this.$router.push({path:'/user/index'});
                })
            },
            onUserSubmit(values) {
                console.log('submit', values);
            },
        },
        components: {
            TencentCaptcha
        }
    }
</script>

<style scoped>
    .card {
        border: 1px solid #f0f0f0;
        box-shadow: 5px 10px 10px rgb(0 0 0 / 5%);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        padding-bottom: 20px;
    }

    .isUserLogin {
        font-size: 14px;
        color: #409EFF;
        margin-right: 16px;
        text-align: right;
        padding: 5px;
    }
</style>
